<template>
  <!-- 评估人考评 -->
  <div class="app-container">
    <el-card>
      <el-button
        type="warning"
        @click="tuiCchuEquipment()"
        style="
          margin-right:15px;
          color: #fff;
        border-radius:4px
        height: 32px;
        line-height: 6px;
        margin-bottom: 10px;
        "
      >退出评估</el-button>
      <h3 style="text-align: center; font-size: 20px">{{this.dataTypesTemp.name}}</h3>
      <!--  ref="ruleForm"  model="ruleForm" -->
      <el-form
        :inline="true"
        class="demo-form-inline"
        style="text-align: center"
        ref="ruleForm"
        :model="ruleForm"
      >
        <!-- 年度--季度下拉框 -->
        <el-row>
          <el-form-item>
            <el-select
              placeholder="请选择"
              style="width:  140px;"
              v-model="ruleForm.years"
              :readonly="true"
            ></el-select>
            <span style="margin-left: 15px;font-weight: 800; font-size: 8px">年</span>
          </el-form-item>

          <el-form-item>
            <el-select
              placeholder="请选择"
              style="width:  140px;"
              v-model="ruleForm.linear"
              :readonly="true"
            ></el-select>
            <span
              style="margin-left: 15px;font-weight: 800; font-size: 8px"
            >{{ this.dataTypesTemp.assessTemplatePeriod==1?'月度': this.dataTypesTemp.assessTemplatePeriod==2? '季度' : "年度"}}</span>
          </el-form-item>
        </el-row>
        <!-- 部门-填报时间-姓名-性别-职务 -->
        <el-row style="margin-top: -10px">
          <el-form-item>
            <span style="margin-right: 10px;font-weight: 800; font-size: 8px">部门</span>
            <el-select
              :readonly="true"
              placeholder="请选择"
              style="width: 140px; margin-right: 15px"
              v-model="ruleForm.department"
            ></el-select>
          </el-form-item>
          <el-form-item>
            <span style="margin-right: 10px;font-weight: 800; font-size: 8px">填报时间</span>
            <el-select
              :readonly="true"
              placeholder="请选择"
              style="width: 140px; margin-right: 15px"
              v-model="ruleForm.times"
            ></el-select>
          </el-form-item>
          <el-form-item>
            <span style="margin-right: 10px;font-weight: 800; font-size: 8px">姓名</span>
            <el-select
              :readonly="true"
              placeholder="请选择"
              style="width:  140px;; margin-right: 15px"
              v-model="ruleForm.names"
            ></el-select>
          </el-form-item>
          <el-form-item>
            <span style="margin-right: 10px; font-weight: 800;font-size: 8px">性别</span>
            <el-select
              :readonly="true"
              placeholder="请选择"
              style="width:  140px;; margin-right: 15px"
              v-model="ruleForm.sexs"
            ></el-select>
          </el-form-item>
          <el-form-item>
            <span style="margin-right: 10px;font-weight: 800; font-size: 8px">职务</span>
            <el-select
              placeholder="请选择"
              style="width: 140px"
              v-model="ruleForm.works"
              :readonly="true"
            ></el-select>
          </el-form-item>
        </el-row>
        <!-- 工作实绩 -->
        <el-row
          style="margin-left:8%;"
          v-for="item in this.dataTypesTemp.contentDto.normDtoList"
          :key="item.index"
        >
          <div style="font-size: 14px; text-align: start; display: flex;">
            <span
              style="display: block;
                margin-top: 0px;
                margin-right: 3px;
                 width: 4px;
                 height: 18px;
                 background-color: blue;
                "
            ></span>
            <span style="font-weight: 800;font-size:18px">{{ item.name }}</span>
          </div>
          <el-row style="display:flex;align-items:center;overflow:auto;width:92.6%">
            <el-form-item
              :style="item.latitudeBeans.length == 1?'width:100%' : 'width:100%'"
              style="display:flex; flex-direction: column;height:auto;margin-top:1%;margin-right:1%"
              v-for="(items, index) in item.latitudeBeans"
              :label="items.name"
              align="center"
              prop="assessorUserType"
            >
              <el-input
                :readonly="true"
                type="textarea"
                :style="item.latitudeBeans.length == 1?'width:100%' : 'width:100%'"
                style="margin-top:1%;"
                :rows="item.latitudeBeans.length == 1?10:gaodu"
                v-for="res in items.content"
                v-model="res.specificContent"
                placeholder="请填写..."
              ></el-input>
            </el-form-item>
          </el-row>
        </el-row>

        <!-- 考核流程 -->
        <el-row style="margin-left:11.8%;">
          <div style="font-size: 14px; text-align: start; display: flex;">
            <span class="liucheng">考核流程</span>
          </div>
          <el-row v-for="item2 in this.dataTypesTemp.contentDto.processBeans" :key="item2.key">
            <el-row style="text-align:start;margin-top:2%">
              <span
                v-if="item2.userId==peopleId? true: false"
                style="font-weight:800;font-size:16px"
              >流程{{ item2.key}}:</span>
              <span
                v-if="item2.userId==peopleId? true: false"
                style="font-weight:800;font-size:16px"
              >&nbsp{{item2.name}}</span>
            </el-row>
            <div
              v-if="item2.userId==peopleId? true: false"
              style="width:86%;overflow :auto;height:auto;margin-top:2%;margin-left:5%;"
            >
              <el-row style="text-align:start;">
                <el-form-item label="评级:">
                  <el-select
                    placeholder="请选择"
                    style="width: 100px;margin-left:10px"
                    v-model="greade"
                  >
                    <el-option label="好" value="1"></el-option>
                    <el-option label="较好" value="2"></el-option>
                    <el-option label="一般" value="3"></el-option>
                    <el-option label="差" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row style="text-align:start;overflow :auto;height:auto;">
                <el-form-item label="意见:">
                  <el-input
                    style="background-color:#fff;height:auto;width:500%;margin-left:10px"
                    v-model="item2.opinion"
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row style="text-align:start">
                <el-form-item label="签名:" style="display:flex;align-items:center">
                  <el-button
                    v-if="!item2.tupians"
                    @click="tupiand(item2)"
                    style="background-color: rgba(219, 215, 215, 0.5);
                     border:none; color: #000;margin-bottom: 5px;margin-left: 10px;height: 30px;line-height: 5px;"
                  >盖签名</el-button>
                  <el-image
                    v-if="item2.tupians"
                    v-model="signImgs"
                    style="width: 150px; height: 100px;margin-left: 10px;"
                    :src="signImgs"
                  ></el-image>
                </el-form-item>
              </el-row>
              <el-row style="text-align:start">
                <el-form-item label="时间:">
                  <span class="deadline" style="margin-left:10px">{{ gettime }}</span>
                </el-form-item>
              </el-row>
            </div>
          </el-row>
        </el-row>
        <el-form-item>
          <el-button @click="closeTargets('ruleForm')" style=" color: #000; margin-bottom: 5px;">取消</el-button>
          <el-button
            @click="addTargets('ruleForm')"
            style=" background-color: rgb(76 106 248);color: #fff;margin-bottom: 5px;"
          >提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
      
      <script>
import { getUsersMUban, getUserId, putTianBao } from "@/api2/kaohe";
import data from "@/data";
export default {
  props: ["personInfo1"],
  data() {
    return {
      gaodu: 5,
      tupians: false,
      gettimes: true,
      showContents: false,
      greade: "",
      formLabelWidth: "80px", //label-width
      deleteStyle: true,
      // 分页属性定义如下{
      // }
      //表格数据数组
      tableData: [],
      userIds: "",
      showList: false,
      latitudeBeansd: [],
      assessTemplateId: "",
      signImgs: "",
      peopleId: "",
      idd: "",
      tableColumns: { list: [], header: [] }, //维度数组
      //弹层数组
      ruleForm: {
        department: "",
        times: "",
        names: "",
        sexs: "",
        works: "",
        greade: "",
        years: "",
        linear: "",
        norms: [],
        message: "", //意见
        assessorUserType: "" //被考核人类型
        //维度
      },
      // 重新赋值，避免破坏原数据
      dataTypesTemp: this.personInfo1,
      gettime: "", //当前时间
      messageList: [],
      messageList1: [],
      tableDatadialog: [], //表格数据
      centerDialogVisible: true
    };
  },

  watch: {
    gaodu() {
      console.log("1321321321", this.gaodu);
    }
  },
  mounted() {
    this.getUserIds();
    // this.nowtime();
    this.currentTime();
  },
  methods: {
    addTargets() {
      this.$confirm("提交评估之后将无法更改，确定提交吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let arr = [];
          this.dataTypesTemp.contentDto.processBeans.forEach(item => {
            if (item.userId == this.peopleId) {
              item.grade = this.greade;
              item.evaluationTime = this.gettime;
              item.state = "2";
              item.signature = this.signImgs;
              arr.push(item);
            }
          });
          console.log(arr);
          console.log(this.dataTypesTemp.contentDto.processBeans);
          const params = {
            type: "2",
            id: this.idd,
            contentDto: {
              processBeans: arr
            }
          };
          console.log(params);
          const res = putTianBao(params);
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.$emit("giveFather4");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    closeTargets(formName) {
      this.$confirm(
        "确定退出对" + "《" + this.ruleForm.names + "》" + "的评估吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.$message({
            type: "success",
            message: "已退出!"
          });
          this.$emit("giveFather4");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    //获取用户基本信息
    getUserIds() {
      setTimeout(() => {
        getUserId()
          .then(res => {
            console.log(res.data.signImg);
            if (res.code == 0) {
              console.log(res);
              this.userIds = res.data.id;
              this.lookMuBan(res.data); //获取表格数据
            } else {
              console.log(error);
            }
          })
          .catch(e => {
            console.log(e);
          });
      }, 500);
    },
    //签名
    tupiand(item) {
      item.tupians = true;
    },
    tuiCchuEquipment() {
      this.$confirm(
        "确定退出对" + "《" + this.ruleForm.names + "》" + "的评估吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.$message({
            type: "success",
            message: "已退出!"
          });
          this.$emit("giveFather4");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    getTime() {
      var _this = this;
      let yy = new Date().getFullYear();
      var mm =
        new Date().getMonth() > 9
          ? new Date().getMonth() + 1
          : new Date().getMonth() == 9
          ? new Date().getMonth() + 1
          : "0" + (new Date().getMonth() + 1);
      var dd =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      _this.gettime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    },
    currentTime() {
      setInterval(this.getTime, 1000);
    },
    //获取模板数据
    async lookMuBan(val) {
      this.signImgs = val.signImg;
      this.peopleId = val.id;
      console.log(val);
      this.idd = this.dataTypesTemp.id;
      console.log(this.dataTypesTemp);
      this.messageList1 = this.dataTypesTemp;
      this.messageList = this.dataTypesTemp.contentDto.userBasicInformationBean;
      //   if (this.dataTypesTemp.val.isDisplay == 1) {
      //     this.showList = true;
      //   } else {
      //     this.showList = false;
      //   }
      this.ruleForm.years = this.messageList.year;
      this.ruleForm.times = this.messageList.fillTime;
      this.ruleForm.linear = this.dataTypesTemp.period;
      this.ruleForm.department = this.messageList.departmentName;
      this.ruleForm.names = this.messageList.userName;
      this.ruleForm.sexs = this.messageList.gender;
      this.ruleForm.works = this.messageList.positionName;
    }

    //填报提交
  }
};
</script>
      <style lang="scss" scoped>
.app-container {
  height: auto;
  background-color: #f4f5fc;
}
.liucheng {
  margin-top: 4%;
  font-weight: 800;
  font-size: 18px;
  background-color: rgba(219, 215, 215, 0.5);
  line-height: 5px;
  height: 18px;
  width: 90px;
  border-radius: 5px 5px 0 0;
  text-align: center;
  margin-left: -15px;
}
::v-deep .el-input--suffix .el-input__inner {
  height: 32px;
  font-size: 14px;
  // padding: 0px 0px 0px 5px;
  border: none;
  border-radius: 5%;
  background-color: rgba(219, 215, 215, 0.3);
}
::v-deep .el-input__icon {
  width: 14px;
}

::v-deep .el-popper[x-placement^="bottom"] {
  font-size: 8px;
  height: 25px;
  line-height: 5px;
}
::v-deep .el-table td,
.el-table th.is-leaf {
  border: none;
}
::v-deep .el-form--inline .el-form-item__content {
  vertical-align: 0;
}
::v-deep .el-form-item__label {
  text-align: left;
  padding: 10px;
}
::v-deep .el-table--border th,
.el-table__fixed-right-patch {
  border: none;
}
::v-deep .el-table::before {
  background-color: #fff;
}
::v-deep .el-table__fixed-right::before,
.el-table__fixed::before {
  background-color: #fff;
}
::v-deep .el-table--border::after,
.el-table--group::after {
  background-color: #fff;
}
::v-deep .el-input--suffix .el-input__inner {
  height: 32px;
  font-size: 14px;
  // padding: 0px 0px 0px 5px;
  border: none;
  border-radius: 5%;
  background-color: rgba(219, 215, 215, 0.3);
}
::v-deep .el-input__icon {
  width: 14px;
}

::v-deep .el-popper[x-placement^="bottom"] {
  font-size: 8px;
  line-height: 5px;
}
::v-deep .el-table td,
.el-table th.is-leaf {
  border: none;
}
::v-deep .el-form--inline .el-form-item__content {
  vertical-align: 0;
}
// ::v-deep .el-form--inline .el-form-item__label {
//   text-align: center;
//   color: #3b95ff;
//   height: 32px;
//   line-height: 10px;
//   background: #e7f2ff;
//   opacity: 1;
// }
::v-deep .el-form--inline .el-form-item__label {
  text-align: center;
  color: #000;
  height: 32px;
  line-height: 10px;
  background: #ccc;
  opacity: 1;
}
::v-deep .el-form-item__label {
  padding: 10px;
}
::v-deep .el-table--border th,
.el-table__fixed-right-patch {
  border: none;
}
::v-deep .el-table::before {
  background-color: #fff;
}
::v-deep .el-table__fixed-right::before,
.el-table__fixed::before {
  background-color: #fff;
}
::v-deep .el-table--border::after,
.el-table--group::after {
  background-color: #fff;
}
</style>
      